<!-- 商品详情页设置面板 -->
<template>
    <el-tabs modelValue="page" stretch>
        <el-tab-pane :label="`${element.name}设置`" name="page">
            <el-scrollbar>
                <el-collapse modelValue="1">
                    <el-collapse-item title="基本设置" name="1">
                        <layout-pane label="隐藏价格">
                            <el-switch v-model="element.customFeature.hiddenGoodsPrice" />
                        </layout-pane>

                        <el-divider></el-divider>
                        <layout-pane label="隐藏原价">
                            <el-switch v-model="element.customFeature.hiddenGoodsOriginalPrice" />
                        </layout-pane>

                        <el-divider></el-divider>
                        <layout-pane label="隐藏购买类型">
                            <el-switch v-model="element.customFeature.hiddenGoodsPurchaseType" />
                        </layout-pane>

                        <el-divider></el-divider>
                        <layout-pane label="隐藏快递信息">
                            <el-switch v-model="element.customFeature.hiddenGoodsExpress" />
                        </layout-pane>

                        <el-divider></el-divider>
                        <layout-pane label="隐藏已售信息">
                            <el-switch v-model="element.customFeature.hiddenGoodsSold" />
                        </layout-pane>

                        <el-divider></el-divider>
                        <layout-pane label="隐藏商品详情">
                            <el-switch v-model="element.customFeature.hiddenGoodsDetails" />
                        </layout-pane>

                        <el-divider></el-divider>
                        <layout-pane label="隐藏商品参数">
                            <el-switch v-model="element.customFeature.hiddenGoodsParams" />
                        </layout-pane>

                        <el-divider></el-divider>
                        <layout-pane label="隐藏商品评论">
                            <el-switch v-model="element.customFeature.hiddenGoodsComment" />
                        </layout-pane>
                    </el-collapse-item>
                </el-collapse>

                <!-- 底部按钮设置 -->
                <goods-detail-bottom-btns :element="element" />
            </el-scrollbar>
        </el-tab-pane>

        <el-tab-pane label="页面样式" name="style">
            <el-scrollbar>
                <el-collapse modelValue="1">
                    <el-collapse-item title="基本设置" name="1">
                        <goods-detail-theme :element="element" />
                    </el-collapse-item>
                </el-collapse>
            </el-scrollbar>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import { defineComponent, toRefs } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import GoodsDetailBottomBtns from './components/goods-detail-bottom-btns'
import GoodsDetailTheme from './components/goods-detail-theme'
export default defineComponent({
    name: 'GoodsDetailSetting',
    components: {
        LayoutPane,
        GoodsDetailBottomBtns,
        GoodsDetailTheme
    },
    props: {
        element: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { element } = toRefs(props)

        return {
            element
        }
    }
})
</script>